<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- bootstrap -->
    <link href="../../../css/bootstrap.css" rel="stylesheet"/>
    <link href="../../../css/bootstrap-responsive.css" rel="stylesheet"/>
    <link href="../../../css/bootstrap-overrides.css" type="text/css" rel="stylesheet"/>

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="../../../css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/elements.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/icons.css"/>

    <!-- libraries -->
    <link rel="stylesheet" type="text/css" href="../../../css/lib/font-awesome.css"/>

    <!-- this page specific styles -->
    <link rel="stylesheet" href="../../../css/compiled/personal-info.css" type="text/css" media="screen"/>

    <!-- this page specific styles -->
    <link rel="stylesheet" href="../../../css/compiled/signin.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../../../css/compiled/form-showcase.css" type="text/css" media="screen"/>

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800'
          rel='stylesheet' type='text/css'/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body style="text-align: center;">

<div class="span7 personal-info">
    <div class="alert alert-info">
        <i class="icon-lightbulb"></i>
        <strong>请详细填写您的个人信息</strong>
    </div>
    <h5 class="personal-title">个人注册</h5>
    <br/>
    <form name="f1" class="form-horizontal" role="form" method="post"
          action="${pageContext.request.contextPath}/user_register.action">
        <div class="form-group">
            <label class="col-sm-4 control-label">姓名</label>
            <div class="col-sm-6">
                <input type="text" onblur="check(this);" class="form-control" id="name" name="name" placeholder="请输入名字">
            </div>
            <font color="red"><span
                    id="username1" class="col-sm-2"></span></font> <font color="green"><span
                id="username2"></span></font>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
            <font color="red"><span
                    id="passwordSpan" class="col-sm-2"></span> </font>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">确认密码</label>
            <div class="col-sm-6">
                <input onblur="surePassword();" type="password" class="form-control" id="repassword" name="repassword"
                       placeholder="请确认密码">
            </div>
            <font color="green"><span
                    id="password1" class="col-sm-2"></span> </font> <font color="red"><span
                id="password2" class="col-sm-2"></span> </font>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">电话</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="phone" name="phone" onblur="checkPhoneNum(this);"
                       placeholder="请输入电话号码">
            </div>
            <font color="green"><span
                    id="phone1" class="col-sm-2"></span> </font> <font color="red"><span id="phone2"
                                                                                         class="col-sm-2"></span>
        </font>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">Email</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="email" id="email" onblur="checkEmail(this);"
                       placeholder="请输入Email">
            </div>
            <font color="green"><span
                    id="email1" class="col-sm-2"></span> </font> <font color="red"><span id="email2" class="col-sm-2"></span>
        </font>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">验证码</label>
            <div class="col-sm-6">
                <input type="text" name="sCode" class="form-control" id="code" placeholder="请输入验证码">
            </div>
            <img id="imgCode" class="col-sm-2"
                 onclick="changeValidate();"
                 src="${pageContext.request.contextPath }/codeImage" title="看不清楚换一张"></img>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">注册</button>
            </div>
        </div>
    </form>
    <!-- end main container -->
</div>
</body>
<!-- scripts -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/theme.js"></script>

<script type="text/javascript">
    //使用的ajax
    var req;
    var name;
    function check(obj) {
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            req = new ActiveXObjext("Microsoft.XMLHTTP");
        }
        name = obj.value;
        <%-- 注意上下文路径的问题--%>
        req.open("POST", "${pageContext.request.contextPath}/validate", true);

        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {

                var checkResult = req.responseText;
                if (checkResult == "yes") {
                    document.getElementById("username2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
                    document.getElementById("username1").innerHTML = '';
                    document.getElementById("username1").innerHTML = "用户名已存在";
                }
                else {
                    document.getElementById("username1").innerHTML = '';
                    document.getElementById("username2").innerHTML = '';
                    document.getElementById("username2").innerHTML = "用户名可入库";
                }
            }
        }
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这个代码加载open和send之间
        req.send("name=" + name);
    }
</script>

<script type="text/javascript">
    //检查验证码
    function changeValidate() {
        var ran = Math.random();
        document.getElementById('imgCode').src =
            "${pageContext.request.contextPath }/codeImage?t=" + ran;
    }
</script>
<script type="text/javascript">
    function changeValidate() {
        var ran = Math.random();
        document.getElementById('imgCode').src =
            "${pageContext.request.contextPath }/codeImage?t=" + ran;
    }
</script>
<script type="text/javascript">
    //确认密码
    function surePassword() {
        //得到前面输入的密码
        var password = document.getElementById('password').value;
        var repassword = document.getElementById('repassword').value;
        //判断密码是否相等
        if (password == repassword) {
            document.getElementById("password1").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("password2").innerHTML = '';
            document.getElementById("password1").innerHTML = "两次密码相同";
        } else {
            document.getElementById("password1").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("password2").innerHTML = '';
            document.getElementById("password2").innerHTML = "两次密码不相同";
        }
    }

    //正则表达式检查电话号码是符合规则
    function checkPhoneNum(obj) {
        var number = obj.value;
        if (!(/^1[34578]\d{9}$/.test(number))) {
            document.getElementById("phone2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("phone1").innerHTML = '';
            document.getElementById("phone2").innerHTML = "手机号码格式错误";
        } else {
            document.getElementById("phone2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("phone1").innerHTML = '';
            document.getElementById("phone1").innerHTML = "手机号码格式正确";
        }
    }

    //正则表达式验证邮箱格式
    function checkEmail(obj) {
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
        var email = obj.value;
        if (!(reg.test(email))) {
            document.getElementById("email2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("email1").innerHTML = '';
            document.getElementById("email2").innerHTML = "邮箱格式格式错误";
        } else {
            document.getElementById("email2").innerHTML = '';//这里都需要清零才可以实现覆盖的效果
            document.getElementById("email1").innerHTML = '';
            document.getElementById("email1").innerHTML = "邮箱格式格式正确";
        }
    }
</script>

</html>
